<template>
  <div>
    <div ref="editor" style="text-align:left"/>
  </div>
</template>

<script>
import E from 'wangeditor'
import { getToken } from '@/utils/auth'

import DOMPurify from 'dompurify'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      // 组件是否初始化
      init: false,
      // html内容是否初始化
      htmlInit: false
    }
  },
  watch: {
    value(newValue) {
      if (newValue) {
        if (this.init && !this.htmlInit) {
          this.editor.txt.html(newValue)
          this.htmlInit = true
        }
      }
    }
  },
  mounted() {
    var that = this
    this.editor = new E(this.$refs.editor)
    this.editor.customConfig.onchange = (html) => {
      this.$emit('valueChange', html)
    }
    this.editor.customConfig.uploadImgServer = process.env.BASE_API + '/sapi/sys/file/wangeditor/upload'
    this.editor.customConfig.uploadImgHeaders = {
      'sapi-token': getToken()
    }
    this.editor.customConfig.withCredentials = true
    this.editor.customConfig.uploadImgMaxLength = 1
    this.editor.customConfig.uploadFileName = 'file'
    this.editor.customConfig.zIndex = 100
    this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024
    this.editor.customConfig.pasteFilterStyle = false
   /* this.editor.customConfig.pasteTextHandle = function(content) {
      // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
      if (content === '' && !content) return ''
      let str = content
      str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
      str = str.replace('/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g', '')
      const reg = new RegExp('<!--(.*?)-->', 'g')
      str = str.replace(reg, '')
      str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
      // str = str.replace(/style=".*"/ig, '')
      // str = str.replace(/<\/?[^>]*>/g, '')
      // str = str.replace(/[ | ]*\n/g, '\n')
      // str = str.replace(/&nbsp;/ig, '')
      console.log('****str修改后的content str', str)
      return str
    }*/
    this.editor.customConfig.pasteTextHandle = function(content) {
      var node = document.createElement('span')
      node.innerHTML = DOMPurify.sanitize(content)

      node.querySelectorAll('*').forEach(function(el) {
        el.removeAttribute('class')
        el.removeAttribute('style')
      })
      var i = node.innerHTML
      return i
    }
    this.editor.create()
    if (this.value) {
      this.editor.txt.html(this.value)
    }

    this.init = true
  },
  methods: {
    removeWordXml(text) {
      console.warn(text)
      var html = text
      html = html.replace(/<\/?SPANYES[^>]*>/gi, '')//  Remove  all  SPAN  tags
      // html = html.replace(/<(\w[^>]*)  class=([^|>]*)([^>]*)/gi, "<$1$3");  //  Remove  Class  attributes
      // html = html.replace(/<(\w[^>]*)  style="([^"]*)"([^>]*)/gi, "<$1$3");  //  Remove  Style  attributes
      html = html.replace(/<(\w[^>]*) {2}lang=([^|>]*)([^>]*)/gi, '<$1$3')//  Remove  Lang  attributes
      html = html.replace(/<\\?\?xml[^>]*>/gi, '')//  Remove  XML  elements  and  declarations
      html = html.replace(/<\/?\w+:[^>]*>/gi, '')//  Remove  Tags  with  XML  namespace  declarations:  <o:p></o:p>
      html = html.replace(/&nbsp;/, '')//  Replace  the  &nbsp;
      html = html.replace(/\n(\n)*( )*(\n)*\n/gi, '\n')
      //  Transform  <P>  to  <DIV>
      // var  re  =  new  RegExp("(<P)([^>]*>.*?)(<//P>)","gi")  ;            //  Different  because  of  a  IE  5.0  error
      //        html = html.replace(re, "<div$2</div>");
      return html
    }
  }
}
</script>

<style scoped>

</style>
